<template>
  <div>
    <div class="search_wrap">
      <el-input placeholder="用户名"
                v-model="seaObj.userName"></el-input>
      <el-input placeholder="邮箱"
                v-model="seaObj.email"></el-input>
      <el-input placeholder="手机号"
                v-model="seaObj.phone"></el-input>
      <el-button icon="el-icon-search"
                 type="success"
                 @click="search">查询</el-button>
    </div>
    <div class="search_wrap">
      <el-input v-model="addObj.adduserName"
                placeholder="用户名"></el-input>
      <el-input v-model="addObj.addemail"
                placeholder="邮箱"></el-input>
      <el-input v-model="addObj.addphone"
                placeholder="手机号"></el-input>
      <el-button icon="el-icon-plus"
                 type="primary"
                 @click="add">添加</el-button>
    </div>
  </div>
</template>
<script>
import { addStudent } from '../../api/student'
export default {
  name: 'Ljfvue2011Stuform',
  data () {
    return {
      addObj: {//添加需要的数据
        addemail: "",
        adduserName: "",
        addphone: ""
      },
      seaObj: {
        userName: "",
        phone: "",
        email: ""
      }

    };
  },
  mounted () {

  },
  methods: {
    search () {//触发bus传值的自定义事件
      this.$bus.$emit("mysearch", this.seaObj.userName, this.seaObj.phone, this.seaObj.email)
      this.seaObj.userName = ""
      this.seaObj.phone = ""
      this.seaObj.email = ""
    },
    async add () {//添加
      var res = await addStudent(this.addObj)
      this.addObj.addemail = "";
      this.addObj.adduserName = "";
      this.addObj.addphone = "";
      console.log(res)
      if (res.data.success) {
        this.$message({
          message: "添加成功",
          type: "success"
        })
        this.$bus.$emit("mylist");
      } else {
        this.$message.error(res.data.err)
      }
    }
  },
};
</script>

<style lang="less" >
.search_wrap {
  width: 70%;
  display: flex;
  justify-content: space-around;
  margin: 30px 0;
  .el-input {
    width: 300px;
  }
}
</style>